<template>
  <div class="invite-home">
    <div class="detail por">
      <template v-if="!isShow">
        <div class="poster poa r0 fr-btn" @click="showPoster">邀请海报</div>
        <div class="my-scholarship poa r0 fr-btn" @click="toScholarship">我的奖学金</div>
      </template>
      <div class="rule">
        <div class="rule-strategy por">
          <div class="big-line poa zi10" v-for="item in 2">
            <div class="circle bdr50"></div>
            <div class="circle bdr50"></div>
            <div class="line poa"></div>
          </div>
          <div class="btn"></div>
          <div class="strategy-inner flex jca tac">
            <div class="inner-item w25" v-for="(item, i) in strategy" :key="i">
              <div class="icon-img por">
                <img :src="item.src" class="abs-mc w75 vam">
              </div>
              <div class="inner-text">{{i + 1}}.{{item.text}}</div>
            </div>
          </div>
        </div>
        <div class="rule-remark por ovh">
          <div class="remark-header tac por">
            <span class="remark-header-text">规则说明</span>
            <div class="header-points poa fs0 lh0"></div>
          </div>
          <ul class="remark-inner">
            <li class="inner-item por" v-for="(item, k) in info.remark" :key="k">{{item}}</li>
          </ul>
        </div>
      </div>
    </div>
    <div class="qrcode tac">
      <img src="../../images/geling_code.jpg" class="code-inner vam">
      <div class="code-text">{{isShow ? '微信关注公众号“格灵课堂”查看活动详情' : '长按识别二维码关注公众号查看邀请进度'}}</div>
    </div>
    <invite-btn v-if="!isShow" class="invite-btn pof" height="2.81rem" @callback="showPoster"></invite-btn>
    <van-dialog class="poster-dialog" v-model="poster" :show-confirm-button="false">
      <div class="dialog-inner tac">
        <div class="por dib vam">
          <img class="close-btn poa t0 r0" src="../../images/close_icon.png" @click="poster = false">
          <img :src="info.poster" class="poster vam">
        </div>
        <img src="../../images/invite/tip_text.png" class="tip-text vam">
      </div>
    </van-dialog>
  </div>
</template>

<script>
  import {mapGetters} from 'vuex';

  export default {
    name: "InviteHome",
    data() {
      return {
        info: {},
        poster: false,
        isShow: false,
        strategy: [
          {src: require('../../images/invite/icon_one.png'), text: '发送邀请海报给好友'},
          {src: require('../../images/invite/icon_two.png'), text: '好友购买会员成功'},
          {src: require('../../images/invite/icon_three.png'), text: '奖金进账'},
        ],
      }
    },
    created() {
      if (this.$route.query.type === 'show') {
        this.isShow = true;
        return this.getActive();
      }
      this.util.login('', this.$route.fullPath).then(res => {
        this.getActive();
      });
    },
    computed: {
      ...mapGetters([
        'userInfo',
        'productInfo'
      ]),
    },
    methods: {
      getActive() {
        this.http.$post('wxcat/api/get_invite', {
          product_id: this.productInfo.product_id,
          uid: this.userInfo.uid,
        }).then(res => {
          res.remark = res.remark.split('\n');
          // poster
          this.info = res;
        }).catch(this.$err);
      },
      showPoster() {
        this.poster = true;
      },
      toScholarship() {
        this.$router.push({
          name: 'Scholarship'
        });
      }
    },
  }
</script>

<style scoped lang="less">
  .invite-home {
    padding-bottom: 1.16rem;
    background: url(../../images/invite/down_bolang.png) no-repeat bottom left / 100%,
    url(../../images/invite/bg_up.png) no-repeat top left / 100%,
    url(../../images/invite/bg.png) no-repeat top left / 100% 100%;
  }

  .detail {
    padding: 13.59rem 1.25rem 0;
    .fr-btn {
      font-size: .81rem;
      line-height: 1.59rem;
      color: #fff;
      border-radius: .78rem 0 0 .78rem;
    }
    .poster {
      top: 6.59rem;
      padding: 0 .42rem 0 .76rem;
      background-image: linear-gradient(90deg, #86d361, #1ecd7d), linear-gradient(90deg, #ffd351, #f9a30d);
    }
    .my-scholarship {
      top: 9.6rem;
      padding: 0 .28rem 0 .54rem;
      background-image: linear-gradient(90deg, #ffc821, #fdb62e), linear-gradient(90deg, #ffd351, #f9a30d);
    }
    .rule-strategy {
      padding-bottom: 2.19rem;
      background-color: #fff;
      box-shadow: 0 .09rem .19rem 0 rgba(255, 130, 72, .3);
      border-radius: .63rem;
      .big-line {
        bottom: -1.48rem;
        left: 1.44rem;
        &:first-child {
          left: unset;
          right: 1.44rem;
        }
        :first-child {
          margin-bottom: 1.03rem;
        }
        .circle {
          width: .63rem;
          height: .63rem;
          background-color: #fa7a54;
        }
        .line {
          top: .19rem;
          left: .13rem;
          width: .38rem;
          height: 1.94rem;
          background-color: #ffe286;
          border-radius: .19rem;
        }
      }
      .btn {
        margin: 0 auto .63rem;
        width: 9.25rem;
        height: 2.06rem;
        transform: translateY(-1.15rem);
        background: url(../../images/invite/btn__zhuanqiangonglue.png) no-repeat top left / 100%;
      }
      .strategy-inner {
        font-size: .81rem;
        line-height: 1rem;
        color: #69605b;
        .icon-img {
          height: 5.5rem;
        }
      }
    }
    .rule-remark {
      margin-top: .63rem;
      padding: 0 1.2rem;
      background-color: #ffffff;
      box-shadow: 0 .09rem .19rem 0 rgba(255, 130, 72, .3);
      .remark-header {
        margin-bottom: 1.25rem;
        padding: 1.78rem 0;
        border-bottom: dashed .05rem #ddd;
        font-size: 1.16rem;
        height: 1.16rem;
        line-height: 1;
        color: #ff5351;
        .remark-header-text {
          &:before, &:after {
            content: '';
            margin: -.53rem .53rem 0;
            display: inline-block;
            vertical-align: top;
            width: 1.88rem;
            height: 1.72rem;
            background: url(../../images/invite/decorate.png) no-repeat top left / 100% 100%;
          }
          &:after {
            margin-top: 0;
            transform: rotate(180deg);
          }
        }
        .header-points {
          white-space: nowrap;
          left: -1.605rem;
          bottom: -.415rem;
          &:before, &:after {
            content: '';
            display: inline-block;
            width: .81rem;
            height: .81rem;
            border-radius: 50%;
            vertical-align: middle;
            background: url(../../images/invite/bg.png) no-repeat top left / 100% 100%;
            box-shadow: 0 .09rem .19rem 0 inset rgba(255, 130, 72, .3);
          }
          &:before {
            margin-right: calc(100vw - 3.31rem);
          }
        }
      }
      .remark-inner {
        padding-bottom: 2rem;
        font-size: .81rem;
        line-height: 1.13rem;
        color: #968880;
      }
      .inner-item {
        padding-left: 1.1rem;
        &:after {
          content: '';
          position: absolute;
          left: .32rem;
          top: .32rem;
          width: .5rem;
          height: .5rem;
          border-radius: 50%;
          background-color: #ffe286;
        }
        & + .inner-item {
          margin-top: .84rem;
        }
      }
    }
  }

  .qrcode {
    padding: 2.13rem 0 4.5rem;
    .code-inner {
      width: 8.75rem;
      height: 8.75rem;
    }
    .code-text {
      margin-top: .88rem;
      color: #b25b38;
    }
  }

  .invite-btn {
    left: calc((100vw - 20.63rem) / 2);
    bottom: 1.16rem;
  }

  .poster-dialog {
    background: none;
    overflow: unset;
  }

  .dialog-inner {
    line-height: 1;
    color: #fff;
    font-size: .94rem;
    [class^=t-] {
      font-family: zhanku;
    }
    .close-btn {
      width: 1.56rem;
      transform: translate(50%, -50%);
    }
    .poster {
      max-width: 17.75rem;
      max-height: 70vh;
      margin-bottom: 1.56rem;
      border: 0;
    }
    .tip-text {
      width: 18rem;
    }
  }
</style>
